<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
    <%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
        <%@ page contentType="text/html;charset=UTF-8" language="java" %>
            <!doctype html>
            <html>

            <head>
                <meta charset="utf-8">
                <title>${novel.name}-${chapter.chapterName}</title>
                <link href="${pageContext.request.contextPath}/static/css/bookdetails-1.css" rel="stylesheet" type="text/css">
                <link href="${pageContext.request.contextPath}/static/css/read-1.css" rel="stylesheet" type="text/css">
                <script src="${pageContext.request.contextPath}/static/tool/jquery.js"></script>
                <script src="${pageContext.request.contextPath}/static/js/bookdetails-1.js"></script>
                <script src="${pageContext.request.contextPath}/static/js/read-1.js"></script>
                <style>
                    .self-left {
                        position: fixed;
                        top: 30%;
                        left: 5%;
                        height: 100px;
                        width: 46px;
                        /* background-color: pink; */
                        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
                    }
                    
                    .ziti,
                    .yanse,
                    .yangsi {
                        margin: 4px 8px;
                        padding: 3px;
                        height: 28px;
                        width: 30px;
                        /* background-color: red; */
                        font-size: 20px;
                        text-align: center;
                        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
                        cursor: pointer;
                        /* line-height: 28px; */
                    }
                    
                    .details {
                        position: fixed;
                        top: 30%;
                        left: 8.2%;
                        /* background-color: pink; */
                        height: 100px;
                        width: 200px;
                        cursor: pointer;
                    }
                    
                    .zitid {
                        height: 33px;
                        width: 143px;
                        border: 1px solid black;
                        font-size: 20px;
                        visibility: hidden;
                    }
                    
                    .yansed {
                        height: 33px;
                        width: 143px;
                        border: 1px solid black;
                        font-size: 20px;
                        visibility: hidden;
                    }
                    
                    .yangsid {
                        height: 33px;
                        width: 143px;
                        border: 1px solid black;
                        font-size: 20px;
                        visibility: hidden;
                    }
                    
                    .zitidd {
                        float: left;
                        padding: 3px;
                        margin: 0px 10px;
                    }
                    
                    .yangsedd {
                        float: left;
                        padding: 3px;
                    }
                    
                    .yangsidd {
                        float: left;
                        padding: 3px;
                    }
                    
                    #bo {
                        background-color: white;
                    }
                </style>


            </head>

            <body id="bo">
                <jsp:include page="../common/head.jsp"></jsp:include>

                <div class="box">
                    <div class="pos">
                        当前位置：<a href="javascript:;">首页</a> > <a href="javascript:;">${novel.name}</a> > ${chapter.quarterNoZh} > ${chapter.chapterNoZh} ${chapter.chapterName}
                        <!-- <a href="javascript:;" class="right">回到目录>></a> -->
                    </div>
                    <div class="con">
                        <div class="tit">${chapter.chapterNoZh} ${chapter.chapterName}</div>
                        <!--章节名称-->
                        <div class="arcticle">
                            ${chapter.content}
                        </div>

                    </div>
                    <div class="prenext">

                        <p class="left"><span class="icon"></span>
                            <c:choose>
                                <c:when test="${chapter.chapterNo> 1 }">
                                    <a class="ease" href="${pageContext.request.contextPath}/authen/read/${chapter.chapterNo-1 }/${novel.id}">上一章</a>
                                </c:when>
                                <c:otherwise>
                                    <a class="ease" href="#">上一章</a>
                                </c:otherwise>
                            </c:choose>
                        </p>
                        <p class="right"><span class="icon"></span>
                            <c:choose>
                                <c:when test="${chapter.chapterNo < novel.chapter }">
                                    <a class="ease" href="${pageContext.request.contextPath}/authen/read/${chapter.chapterNo+1 }/${novel.id}">下一章</a>
                                </c:when>
                                <c:otherwise>
                                    <a class="ease" href="#">下一章</a>
                                </c:otherwise>
                            </c:choose>
                        </p>
                    </div>
                    <!--上下章-->
                </div>
                <!--内容区结束-->

                <ul class="fixed">

                    <li class="icon" title="展开目录"></li>
                    <li class="icon" title="我要评论"></li>

                    <li class="icon" title="上一章"></li>
                    <li class="icon" title="下一章"></li>
                    <li class="icon" title="回到顶部"></li>

                    <div class="Catalog">
                        <div class="cata_2">
                            <div class="scroll"></div>
                        </div>
                        <!--滚动条-->
                        <div class="cata_1">
                            <ul class="cata_con">
                                <c:forEach items="${chapterVo}" var="chapterVo">
                                    <li><a href="#" class="tit">${chapterVo.quarterName}</a></li>
                                    <c:forEach items="${chapterVo.chapters}" var="chapter">
                                        <li><a href="${pageContext.request.contextPath}/authen/read/${chapter.chapterNo}/${novel.id}"><span></span> ${chapter.chapterNoZh} ${chapter.chapterName}</a></li>
                                    </c:forEach>
                                </c:forEach>
                            </ul>
                        </div>
                        <!--文章目录内容-->
                    </div>
                    <!--展开目录-->

                    <div class="I_ment">
                        <p class="r"></p>
                        <p class="r2"></p>

                        <p class="left red">评论内容不得少于5个字</p><span class="icon"><!--X--></span>
                        <form id="commentForm" method="post">
                            <input type="hidden" name="novelId" value="${novel.id}">
                            <input type="hidden" name="chapterId" value="${chapter.id}">
                            <input type="hidden" name="quarterNoZh" value="${chapter.quarterNoZh}">
                            <input type="hidden" name="chapterNoZh" value="${chapter.chapterNoZh}">
                            <input type="hidden" name="authorId" value="${novel.authorId}">
                            <textarea name="content">我要评论...</textarea>
                            <p class="left">您<samp>还可以输入</samp><b>100</b>个字</p><input type="button" class="commentBtn" value="提交">
                        </form>
                    </div>
                    <!--我要评论-->
                </ul>


                <div class="mark">
                    <div class="mark_bor">
                        <div class="clear"><img src="${pageContext.request.contextPath}/static/img/selected.png">
                            <p>发表评论成功</p>
                        </div>
                    </div>
                </div>
                <!--遮罩层-->
                <div class="self-left">
                    <div class="ziti">中</div>
                    <div class="yanse">白</div>
                    <div class="yangsi">黑</div>
                </div>
                <div class="details">
                    <div class="zitid">
                        <div class="zitidd">小</div>
                        <div class="zitidd">中</div>
                        <div class="zitidd">大</div>
                    </div>
                    <div class="yansed">
                        <div class="yangsedd">黄色</div>
                        <div class="yangsedd">粉色</div>
                        <div class="yangsedd">灰色</div>
                    </div>
                    <div class="yangsid">
                        <div class="yangsidd">宋体</div>
                        <div class="yangsidd">楷体</div>
                        <div class="yangsidd">黑体</div>
                    </div>
                </div>
                <footer class="clear">

                </footer>
                <script>
                    $(".commentBtn").click(function() {
                        $.ajax({
                            //几个参数需要注意一下
                            type: "POST", //方法类型
                            dataType: "json", //预期服务器返回的数据类型
                            url: "${pageContext.request.contextPath}/authen/parentComment", //url
                            data: $('#commentForm').serialize(),
                            success: function(result) {
                                if (result.success) {
                                    layer.msg("评论成功");
                                } else {
                                    layer.msg("评论失败");
                                };
                            },
                            error: function() {
                                alert("异常！");
                            }
                        });
                    });
                </script>
                <script>
                    <c:if test = "${info == true}" >
                        layer.msg("未查询到章节信息");
                        </c:if>
                    var ziti = document.querySelector(".ziti");
                    var yanse = document.querySelector(".yanse");
                    var yangsi = document.querySelector(".yangsi");
                    var a = 0;
                    var b = 0;
                    var c = 0;

                    var zitid = document.querySelector(".zitid");
                    var yansed = document.querySelector(".yansed");
                    var yangsid = document.querySelector(".yangsid");
                    var con = document.querySelector('.con');
                    var bo = document.querySelector("#bo");

                    // 点击后显示
                    ziti.addEventListener("click", function() {
                        if (a == 0) {
                            zitid.style.visibility = 'visible';
                            a++;
                        } else {
                            a = 0;
                            zitid.style.visibility = 'hidden';
                        }
                    })
                    yanse.addEventListener("click", function() {
                        if (b == 0) {
                            yansed.style.visibility = 'visible';
                            b++;
                        } else {
                            b = 0;
                            yansed.style.visibility = 'hidden';
                        }
                    })
                    yangsi.addEventListener("click", function() {
                            if (a == 0) {
                                yangsid.style.visibility = 'visible';
                                a++;
                            } else {
                                a = 0;
                                yangsid.style.visibility = 'hidden';
                            }
                        })
                        // 字体大小点击后出效果
                    zitid.firstElementChild.addEventListener('click', function() {
                        this.style.color = "#8B0B0B";
                        ziti.innerHTML = "小";
                        con.style.fontSize = "10px";
                        zitid.firstElementChild.nextElementSibling.style.color = "black";
                        zitid.lastElementChild.style.color = "black";
                    })
                    zitid.firstElementChild.nextElementSibling.addEventListener('click', function() {
                        this.style.color = "#8B0B0B";
                        ziti.innerHTML = "中";
                        con.style.fontSize = "20px";
                        zitid.lastElementChild.style.color = "black";
                        zitid.firstElementChild.style.color = "black";
                    })
                    zitid.lastElementChild.addEventListener('click', function() {
                            this.style.color = "#8B0B0B";
                            ziti.innerHTML = "大";
                            con.style.fontSize = "30px";
                            zitid.lastElementChild.style.color = "black";
                            zitid.firstElementChild.nextElementSibling.style.color = "black";
                        })
                        // 颜色点击后出效果
                    yansed.firstElementChild.addEventListener('click', function() {
                        this.style.color = "#8B0B0B";
                        yanse.innerHTML = "黄";
                        con.style.backgroundColor = "rgba(229, 224, 145, 0.6)";
                        bo.style.backgroundColor = "rgba(229, 224, 145, 0.6)";
                        yansed.firstElementChild.nextElementSibling.style.color = "black";
                        yansed.lastElementChild.style.color = "black";
                    })
                    yansed.firstElementChild.nextElementSibling.addEventListener('click', function() {
                        this.style.color = "#8B0B0B";
                        yanse.innerHTML = "粉";
                        con.style.backgroundColor = "rgba(238, 13, 13, 0.119)";
                        bo.style.backgroundColor = "rgba(238, 13, 13, 0.119)";
                        yansed.lastElementChild.style.color = "black";
                        yansed.firstElementChild.style.color = "black";
                    })
                    yansed.lastElementChild.addEventListener('click', function() {
                            this.style.color = "#8B0B0B";
                            yanse.innerHTML = "灰";
                            con.style.backgroundColor = "rgba(187, 172, 172, 0.315)";
                            bo.style.backgroundColor = "rgba(187, 172, 172, 0.315)";
                            yansed.lastElementChild.style.color = "black";
                            yansed.firstElementChild.nextElementSibling.style.color = "black";
                        })
                        // 字体点击后出效果
                    yangsid.firstElementChild.addEventListener('click', function() {
                        this.style.color = "#8B0B0B";
                        yangsi.innerHTML = "宋";
                        con.style.fontFamily = "宋体";
                        yangsid.firstElementChild.nextElementSibling.style.color = "black";
                        yangsid.lastElementChild.style.color = "black";
                    })
                    yangsid.firstElementChild.nextElementSibling.addEventListener('click', function() {
                        this.style.color = "#8B0B0B";
                        yangsi.innerHTML = "楷";
                        con.style.fontFamily = "楷体";
                        yangsid.lastElementChild.style.color = "black";
                        yangsid.firstElementChild.style.color = "black";
                    })
                    yangsid.lastElementChild.addEventListener('click', function() {
                        this.style.color = "#8B0B0B";
                        yangsi.innerHTML = "黑";
                        con.style.fontFamily = "黑体";
                        yangsid.lastElementChild.style.color = "black";
                        yangsid.firstElementChild.nextElementSibling.style.color = "black";
                    })
                </script>
            </body>

            </html>